<template>
  <div class="home">
    <div class="isEmpty" v-if="!list.length">
      <h2>再也不会忘记买葱了</h2>
      <p>将用料丢进菜篮子，每次去超市就不会忘记买需要的东西了</p>
    </div>

    <!--  -->
    <menu-list
      v-for="(d, i) in list"
      :key="d.title"
      :data="d"
      :index="i"
      @addMaterial="addMaterial"
      @setStatus="setStatus"
      @del="del"
    >
    </menu-list>

    <!-- 右下角添加按钮 -->
    <div class="add-btn" @click="add">+</div>
    <!-- 添加时后背蒙版 -->
    <div class="mask" v-if="isShow || isMaterialShow" @click="isMaterialShow = false; isShow=false"></div>

    <!-- 点击添加按钮出现编辑组件 -->
    <transition name="menu">
      <add-menu v-if="isShow" @comfirm="comfirm($event)"></add-menu>
    </transition>

    <!-- 添加用料组件 -->
    <transition name="material-menu">
      <add-material v-if="isMaterialShow"
        :title="materialTile"
        :index="materialIndex"
        @materialList="materialList"
      ></add-material>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import AddMenu from "@/components/AddMenu";
import MenuList from "@/components/MenuList";
import AddMaterial from "@/components/AddMaterial";
export default {
  components: { AddMenu, MenuList, AddMaterial },
  name: "Home",
  data() {
    return {
      isShow: false,
      isMaterialShow: false,
      // list: [
        // {
        //   title: "炖肉",
        //   yesList: [],
        //   noList: [],
        // },
      // ],
      list: JSON.parse(localStorage.getItem('material')) || [],

      // 
      materialTile: null,
      // 点击添加用料的下标
      materialIndex: null
    };
  },
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem('material', JSON.stringify(this.list));
      }
    }
  },
  methods: {
    // 清单点击完成的事件
    comfirm(val) {
      this.isShow = false;
      this.list.push({
        title: val,
        yesList: [],
        noList: [],
      });
      console.log(this.list);
    },
    // 点击右下角的按钮
    add() {
      this.isShow = true;
    },
    // 添加用料
    addMaterial(event) {
      this.materialTile = this.list[event].title;
      this.materialIndex = event;
      this.isMaterialShow = true;
    },
    // 添加用料完成按钮
    materialList(data, index) {

      this.isMaterialShow = false;
      this.list[index].noList.push({
        ...data,
      })
    },
    // 更改状态
    setStatus(type, fIndex, sIndex) {
      if (type === 'no') {
        let d = this.list[fIndex].noList.splice(sIndex, 1)
        console.log(d,d[0])
        this.list[fIndex].yesList.push(d[0])
      } else if (type === 'yes') {
        let d = this.list[fIndex].yesList.splice(sIndex, 1)
        this.list[fIndex].noList.push(d[0])
      }
      console.log(this.list)
    },

    // 删除
    del(index) {
      this.list.splice(index, 1);
      console.log(111)
    }
  },
};
</script>

<style lang="sass">
.home
  padding: 20px
  .menu-list
    margin-bottom: 20px
  .add-btn
    width: 50px
    height: 50px
    background: orange
    border-radius: 50%
    color: #fff
    font-weight: bold
    text-align: center
    line-height: 50px
    font-size: 36px
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3)
    position: fixed
    bottom: 30px
    right: 30px
  .mask
    position: fixed
    top: 0
    left: 0
    bottom: 0
    right: 0
    background: rgba(0, 0, 0, .5)

  .menu-enter, .menu-leave-to, .material-menu-enter, .material-menu-leave-to
    bottom: -100%
  .menu-enter-active, .menu-leave-active, .material-menu-enter-active, .material-menu-leave-active
    transition: .5s
</style>